$(document).ready(function () {
    var date = new Date(); // today
    prayTimes.setMethod('Egypt');
    var times = prayTimes.getTimes(date, [30.0500, 31.2500], +2);
    var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
    var outOfIf = 0;
    htmlDiv = '<div class="tiles">';
    htmlDiv += '<div class="live-tile"><div id="timeTile"><img id="imgPrayer"/>';
    var prayerImage;
    for (var i in list) {
        var separator = times[list[i].toLowerCase()].split(":");
        if (outOfIf == 0) {
            if ((separator[0] <= date.getHours() && separator[1] <= date.getMinutes()) || separator[0] < date.getHours() ) {
                htmlDiv += '<div>' + list[i] + ':' + times[list[i].toLowerCase()] + '</div>';
            }
            else if ((separator[0] >= date.getHours() && separator[1] >= date.getMinutes()) ||
                     (separator[0] >= date.getHours() && separator[1] < date.getMinutes())) {
                prayerImage = list[i];
                htmlDiv += '<div style="background-color:#0072C6; color:white;">';
                htmlDiv += list[i] + ':' + times[list[i].toLowerCase()] + '</div>';
                outOfIf = 1;
            }
        }
        else {
            htmlDiv += '<div>' + list[i] + ':' + times[list[i].toLowerCase()] + '</div>';
        }        
    }   
    htmlDiv += '</div></div></div>';
    document.getElementById('htmlDiv').innerHTML = htmlDiv;
    $('#imgPrayer').attr('src', '../Images/Tiles/' + prayerImage + '.png');
    
    function getid(id) {
        return document.getElementById(id);
    }
});